<script setup lang="ts">
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
import { MessageBox } from '../components/dialog/MessageBox';
import { useUserStore } from '../stores/user.store';
// import { UsersApi } from '../api';
let store = useUserStore();
let username = ref('');
let password = ref('');
let confirmPassword = ref('');
// 这里可以添加注册逻辑
const handleRegister = async () => {
  // 处理注册逻辑
//   if (password.value !== confirmPassword.value) {
//     MessageBox.alert('密码不一致');
//     return;
//   }
  await store.register(username.value,password.value)
};
</script>

<template>
  <div title="container" class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
        注册新账户
      </h2>
    </div>

    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
      <form class="space-y-6" @submit.prevent="handleRegister">
       

        <div>
          <label for="username" class="block text-sm font-medium leading-6 text-gray-900">
            用户名
          </label>
          <div class="mt-2">
            <input
              v-model="username"
              id="username"
              name="username"
              type="text"
              autocomplete="username"
              required
              class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between">
            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
              密码
            </label>
          </div>
          <div class="mt-2">
            <input
              id="password"
              name="password"
              v-model="password"
              type="password"
              autocomplete="new-password"
              required
              class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between">
            <label for="confirmPassword" class="block text-sm font-medium leading-6 text-gray-900">
              确认密码
            </label>
          </div>
          <div class="mt-2">
            <input
              id="confirmPassword"
              name="confirmPassword"
              v-model="confirmPassword"
              type="password"
              autocomplete="new-password"
              required
              class="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>

        <div>
          <button
            :disabled="store.requesting"
            type="submit"
            class="flex invalid:bg-slate-300 w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            注册
          </button>
        </div>
      </form>

      <p class="mt-10 text-center text-sm text-gray-500">
        已有账户？
        <RouterLink to="/login" href="#" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
          登录
        </RouterLink>
      </p>
    </div>
  </div>
</template>

<style scoped>

</style>